import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Form, Button, Input, Row, Col, message, Select } from 'antd';
import styles from './EditInfo.css'

const FormItem = Form.Item;


class EditInfo extends Component {

    constructor(props) {
        super();
        this.state = {
            timer: 60,
            buttonText: '获取验证码',
            flag: false,
            readOnly: true,
            submit: false
        }
    }
    handleSubmit = (msg) => {
        this.props.form.validateFields(
            (err, value) => {
                if (!err) {
                    if (this.state.flag) {
                        if (value.position === undefined) {
                            value.position = null
                        }
                        value.Twostate = true; // 添加 第二页跳转标志
                        this.props.dispatch({
                            type: 'cardProcess/infoSave',
                            payload: value
                        })
                    } else {
                        message.warning('请输入6位有效的手机验证码')
                    }
                }
            }
        )
    }

    handleGetCode = (event) => {
        const _Error = this.props.form.getFieldError('phoneNumber'),
            _Value = this.props.form.getFieldValue('phoneNumber');
        let s = this.state.timer;

        this.setState({ flag: false });
        //console.log(this.props.form.getFieldError('phoneNumber')) // 获取指定控件error值 (错误时可以打出错误提示信息 反之 undefined)
        //console.log(this.props.form.getFieldValue('phoneNumber')) // 获取指定控件输入值 (value)
        if (_Error === undefined && _Value === undefined) {
            message.warning('请输入手机号码')
        } else if (_Error !== undefined) {
            message.warning('请输入11位有效的手机号码')
        } else {
            clearInterval(global.timer);
            message.success('验证码已发送至您的手机，请注意查收！');
            // 定时任务  修改获取验证码文本  防止恶意发送获取验证码请求
            this.setState({
                flag: true,
                readOnly: false
            });
            global.timer = setInterval((e) => {
                s--;
                this.setState({
                    timer: s,
                    buttonText: s + '秒后可再获取验证码',
                    disabled: true
                });
                if (s < 0) {
                    this.setState({
                        timer: 60,
                        buttonText: '获取验证码',
                        disabled: false
                    });
                }
            }, 1000);
        }
    }
    componentWillUnmount(){ // 被卸载时 做清除定时器
        clearInterval(global.timer);
    }
    
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: { span: 6 },
            wrapperCol: { span: 18 },

        };
        // const submit = this.props.par_infoData.submit ? this.handleSubmit() : this.handleSubmit;
        const { par_infoData, data,ID_info } = this.props;
        return (
            <div className={styles.container}>
                <p className={styles.title}>基本信息填写：</p>
                <div className={styles.content}>
                    <Row className={styles.tableRows}>
                        <Col span={12}>
                            <Row>
                                <Col className={styles.tableCols} span={6}>姓 名</Col>
                                <Col span={18}>{ID_info.name}</Col>
                            </Row>
                        </Col>
                        <Col span={12}>
                            <Row>
                                <Col className={styles.tableCols} span={6}>性 别</Col>
                                <Col span={18}>{ID_info.sex}</Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className={styles.tableRows}>
                        <Col span={12}>
                            <Row>
                                <Col className={styles.tableCols} span={6}>证件号</Col>
                                <Col span={18}>{ID_info.idno}</Col>
                            </Row>
                        </Col>
                        <Col span={12}>
                            <Row>
                                <Col className={styles.tableCols} span={6}>名 族</Col>
                                <Col span={18}>{ID_info.nation}</Col>
                            </Row>
                        </Col>
                    </Row>
                    <Row className={styles.tableRows}>
                        <Col span={12}>
                            <Row>
                                <Col className={styles.tableCols} span={6}>证件有效期</Col>
                                <Col span={18}>{ID_info.startdate}-{ID_info.enddate}</Col>
                            </Row>
                        </Col>
                    </Row>
                    <Form onSubmit={this.handleSubmit} >
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="手机号"
                                    hasFeedback
                                >
                                    {getFieldDecorator('phoneNumber', {
                                        rules: [
                                            { required: true, message: '请输入手机号码！' },
                                            { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: '请输入11位有效的手机号码！' }
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.phoneNumber
                                    })(
                                        <Input placeholder="请输入手机号码" maxLength='11' autoComplete="off" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="验证码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('code', {
                                        rules: [
                                            { required: true, message: '请输入手机验证码!' },
                                            { pattern: /^[a-zA-Z0-9]{6}$/, message: '请输入有效的验证码！' }
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.code
                                    })(
                                        <Input placeholder="请输入手机验证码" maxLength='6' readOnly={this.state.readOnly} autoComplete="off" />

                                    )}
                                </FormItem>
                            </Col>
                            <Col span={12} style={{ lineHeight: '39.9999999px',paddingLeft:'30px' }}>
                                <Button disabled={this.state.disabled} onClick={this.handleGetCode}>{this.state.buttonText}</Button>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="职业"
                                    hasFeedback
                                >
                                    {getFieldDecorator('position', {
                                        rules: [
                                            { required: true, message: '请选择您所从事的职业!' },
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.position
                                    })(
                                        <Select placeholder="请选择您所从事的职业">
                                            <Select.Option value="国际机关、党群组织、企业、事业单位负责人">国际机关、党群组织、企业、事业单位负责人</Select.Option>
                                            <Select.Option value="专业技术人员">专业技术人员</Select.Option>
                                            <Select.Option value="办事人员和有关人员">办事人员和有关人员</Select.Option>
                                            <Select.Option value="商业、服务业人员">商业、服务业人员</Select.Option>
                                            <Select.Option value="农、林、渔、水利业生产人员">农、林、渔、水利业生产人员</Select.Option>
                                            <Select.Option value="房地产">房地产</Select.Option>
                                            <Select.Option value="供水、污水处理、废物管理和补救">供水、污水处理、废物管理和补救</Select.Option>
                                            <Select.Option value="建筑业">建筑业</Select.Option>
                                            <Select.Option value="批发和零售业、汽车和摩托车修理">批发和零售业、汽车和摩托车修理</Select.Option>
                                            <Select.Option value="信息和通信">信息和通信</Select.Option>
                                            <Select.Option value="金融和保险">金融和保险</Select.Option>
                                            <Select.Option value="行政和辅助">行政和辅助</Select.Option>
                                            <Select.Option value="运输与存储">运输与存储</Select.Option>
                                            <Select.Option value="其他">其他</Select.Option>
                                        </Select>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label="联系地址"
                                    hasFeedback
                                    extra={'如：新疆省阿克苏市xx路xxx小区xx号楼xx单元201室。'}
                                >
                                    {getFieldDecorator('location', {
                                        rules: [
                                            { required: true, message: '请输入联系地址！' },
                                        ],
                                        validateFirst: true,
                                        initialValue: ID_info.address
                                    })(
                                        <Input placeholder="请输入联系地址！" autoComplete="off"/>
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={12}>
                            </Col>
                        </Row>
                    </Form>
                </div>
                {/* <Form onSubmit={this.handleSubmit} className={styles.from}>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="手机号"
                                    hasFeedback
                                >
                                    {getFieldDecorator('phoneNumber', {
                                        rules: [
                                            { required: true, message: '请输入手机号码！' },
                                            { pattern: /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/, message: '请输入11位有效的手机号码！' }
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.phoneNumber
                                    })(
                                        <Input placeholder="请输入手机号码" maxLength='11' autoComplete="off"  />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="验证码"
                                    hasFeedback
                                >
                                    {getFieldDecorator('code', {
                                        rules: [
                                            { required: true, message: '请输入手机验证码!' },
                                            { pattern: /^[a-zA-Z0-9]{6}$/, message: '请输入有效的验证码！' }
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.code
                                    })(
                                        <Input placeholder="请输入手机验证码" maxLength='6' readOnly={this.state.readOnly} autoComplete="off" />

                                    )}
                                </FormItem>
                            </Col>
                            <Col span={4} className={styles.button}>
                                <Button disabled={this.state.disabled} onClick={this.handleGetCode}>{this.state.buttonText}</Button>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="邮编"
                                    hasFeedback
                                >
                                    {getFieldDecorator('postcode', {
                                        rules: [
                                            { required: true, message: '请输入居住地邮编！' },
                                            { pattern: /^[1-9][0-9]{5}$/, message: '请输入有效的邮编！' }
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.postcode
                                    })(
                                        <Input placeholder="请输入邮编！" autoComplete="off" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="职业"
                                >
                                    {getFieldDecorator('position', {
                                        rules: [
                                            { required: false, message: '请输入职位！' },
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.position
                                    })(
                                        <Input placeholder="请输入职位！" autoComplete="off" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                    <div className="inputItem lastItem">
                        <Row gutter={16}>
                            <Col span={18}>
                                <FormItem
                                    {...formItemLayout}
                                    label="联系地址"
                                    hasFeedback
                                    extra={'如：新疆省阿克苏市xx路xxx小区xx号楼xx单元201室。'}
                                >
                                    {getFieldDecorator('location', {
                                        rules: [
                                            { required: true, message: '请输入联系地址！' },
                                        ],
                                        validateFirst: true,
                                        initialValue: par_infoData.location
                                    })(
                                        <Input placeholder="请输入联系地址！" autoComplete="off" />
                                    )}
                                </FormItem>
                            </Col>
                        </Row>
                    </div>
                                </Form> */}
            </div>
        );
    }
}
EditInfo = Form.create({})(EditInfo);

function mapStateToProps(state) {
    const data = state.cardProcess.data;
    const ID_info = state.getCard.data;
    return { data,ID_info };
}
export default connect(mapStateToProps)(EditInfo);